<template>
  <div class="app-container">
    <div class="query-wrapper" model="queryParams" style="margin-bottom: 20px;">
      <el-select
        v-model="queryParams.vesselName"
        filterable
        clearable
        placeholder="Vessel"
        style="width:180px"
        @change="selectVessel(queryParams)"
      >
        <el-option :key="item.vesselName" :label="item.vesselName" :value="item.vesselName" v-for="item in vessels"> </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select
        v-model="queryParams.voyageNo"
        filterable
        clearable
        placeholder="Voyage"
        @change="selectVoyage(queryParams)"
         style="width:150px"
      >
        <el-option :key="item.voyageNo" :label="item.voyageNo" :value="item.voyageNo" v-for="item in voyages"> </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="queryParams.pol" filterable clearable placeholder="POL">
        <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pols"> </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="queryParams.pod" filterable clearable placeholder="POD">
        <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pods"> </el-option>
      </el-select>

      &nbsp;&nbsp;
      <el-select v-model="queryParams.brand" filterable clearable allow-create placeholder="Brand">
        <el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in brands"> </el-option>
      </el-select>
      <!-- <el-input v-model="queryParams.brand" style="width: 160px" placeholder="BRAND" clearable/> &nbsp;&nbsp; -->
      &nbsp;&nbsp;
      <el-select v-model="formParam.cargoType" filterable clearable placeholder="Cargo Type">
        <el-option v-for="item in cargo_type" :key="item.label" :label="item.label" :value="item.label" />
      </el-select> 
      &nbsp;&nbsp;<el-date-picker
        type="daterange"
        start-placeholder="Start date"
        end-placeholder="End date"
        format="YYYY-MM-DD"
        v-model="dateValue"
        class="ipt" />
      &nbsp;&nbsp; 
      <el-button type="primary" icon="search" @click="search">{{ $t("ship.button.search") }}</el-button>
      <SearchReset :query-params="queryParams" @reset="resetQuery"/> 
    </div>
  </div>

  <el-table stripe :data="listData" :cell-style="{textAlign:'center'}" style="width: 100%" @sort-change="handleSortChange">
    <el-table-column prop="vesselName" label="Vessel Name" />
    <el-table-column prop="voyageNo" label="Voyage" />
    <el-table-column prop="startDate" label="Start Date"  />
    <el-table-column prop="endDate" label="End Date" />
    <el-table-column prop="sumVoyageDay" label="Voyage Days" sortable />
    <el-table-column prop="revenue" label="Revenue" />
    <el-table-column prop="remark" label="Remarks" />
  </el-table>

  <pagination
    v-show="total > 0"
    :total="total"
    :page="queryParams.pageNum"
    :limit="queryParams.pageSize"
    @pagination="pageQuery"
    style="float: right"
  />
</template>
<script lang="ts" setup name="revenue">
import { ref, onMounted, reactive } from "vue";
import service from "@/utils/request";
import { ElNotification, ElMessageBox } from "element-plus";
import { convertDate } from "@/utils/date";
const { proxy } = getCurrentInstance();
const custForm = ref(null);
const dialogTitle = ref("");
const initForm = {
  clientId: null,
  fullName: null,
  clientCode: null,
  contactName: null,
  mobile: null,
  cargoType: null
};
const formParam = reactive(Object.assign({}, initForm));

const dateValue = ref([]);
let pols = ref([] as any);
let pods = ref([] as any);
let vessels = reactive([] as any);
let voyages = reactive([] as any);

const selectVessel = form => {
  queryParams.voyageNo = null;
  queryParams.pol = null;
  queryParams.pod = null;
  voyages = [];
  pods.value = [];
  pols.value = [];
  if (form.vesselName != null && form.vesselName != undefined) {
    let item = vessels.find(n => n.vesselName == form.vesselName);
    if (item) {
      form.vesselCode = item.vesselCode;
      voyages = item.schedules;
    }
  }
};
const selectVoyage = async form => {
  queryParams.pol = null;
  queryParams.pod = null;
  //@ts-ignore
  let item = voyages.find(n => n.voyageNo == form.voyageNo);
  if (item) {
    pods.value = item.pods;
    pols.value = item.pols;
  }
};

const total = ref(0);
const statuss = ["UnApprove", "Approve", "Reject"];
const mailValid = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("email can't be blank"));
  } else if (!/^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/.test(value)) {
    callback(new Error("The email format is illegal!"));
  } else {
    callback();
  }
};
const rules = ref({
  mail: [{ required: true, trigger: "blur", validator: mailValid }]
});

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  vesselName: null,
  voyageNo: null,
  pol: null,
  pod: null,
  cargo_type: null,
  brand: null,
  startDate: convertDate(dateValue.value[0]),
  endDate: convertDate(dateValue.value[1]),
  orderByColumn: undefined,
  isAsc: undefined
});

const listData = ref([]);

const refreshTable = async () => { 
  queryParams.startDate = convertDate(dateValue.value[0]);
  queryParams.endDate = convertDate(dateValue.value[1]);
  let result = await service.get("/shipping/freighted/revenue", {
    params: queryParams
  });
  listData.value = result.data;
  total.value = result.total
};
const resetQuery = (data) => {
  Object.assign(queryParams, data)
  listData.value = []
  total.value = 0
}
const dialogFormVisible = ref(false);

let isAdd = false;

const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};

const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async valid => {
    if (!valid) {
      return;
    } 
    await service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right"
    });
    dialogFormVisible.value = false;
    refreshTable();
  });
};

const pageQuery = async e => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => {
  refreshTable();
};

const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};

const removeClickEvent = id => {
  ElMessageBox.confirm("Confirm to delete the data？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel"
  }).then(async () => {
    await service.delete(`shipping/fixture/${id}`);

    refreshTable();
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "Delete successfully!",
      position: "bottom-right"
    });
  });
};
let brands = reactive([]);
let cargo_type = reactive([]);
onMounted(async () => {
  let result = await service.get("/shipping/schedule/getAllSchedule");
  if (result) {
    vessels = result.data;
  }
  let brandList = await service.get("/shipping/brand/list"); 
  if (brandList) {
    brands = brandList.data;
  }
  const res = await proxy.useDict("cargo_type");
  cargo_type = res.cargo_type;
});
</script>
<style lang="scss" scoped>
// .query-wrapper1 {
//   display: flex;
//   margin: 0 15px;
//   border-radius: 3px;
//   align-items: center;
//   height: 60px;
//   font-size: var(--content-font-size);
//   line-height: var(--input-line-height);
//   width: 1400px;
// }
</style>
